@use "../../styles/lib/svg";

.star-button {
  position: fixed;
  right: 20px;
  bottom: 136px;

  width: 36px;
  height: 36px;
  border: 1px solid var(--border-color);
  border-radius: 50%;

  background-color: var(--bg-color);
  box-shadow: 1px 1px 2px 3px var(--soft-shadow);

  .icon {
    @include svg.background-svg(
      '<svg viewBox="0 0 1024 1024"><path fill="#feba60" d="M218.862 956.215c17.554 13.294 39.863 8.576 66.432-10.716L512 779.21 739.145 945.5c26.57 19.292 48.42 24.01 66.432 10.716 17.554-13.294 21.431-35.145 10.716-66.432l-89.582-266.57 228.864-164.57c26.569-18.853 37.284-38.584 30.427-59.996-6.857-20.572-27.008-30.866-59.995-30.428l-280.722 1.701L560 102.07c-10.277-31.707-25.691-47.56-48-47.56-21.851 0-37.285 15.853-47.58 47.56l-85.284 267.85-280.704-1.7c-33.006-.44-53.138 9.855-59.995 30.427-7.296 21.43 3.84 41.143 30.427 59.995L297.71 623.214l-89.564 266.569c-10.715 31.287-6.857 53.138 10.716 66.432zm61.714-84.846c-.86-.86-.439-1.298 0-3.876l85.285-245.139c5.577-16.713 2.56-29.988-12.435-40.283l-213.43-147.438c-2.14-1.28-2.56-2.14-2.14-3.42.439-1.28 1.28-1.28 3.858-1.28l259.292 4.718c17.554.421 28.708-6.857 34.285-24.43l74.149-248.136c.841-2.579 1.7-3.438 2.56-3.438 1.28 0 2.14.86 2.56 3.42l74.587 248.136c5.139 17.591 16.714 24.869 34.286 24.448l259.292-4.717c2.56 0 3.419 0 3.84 1.28.438 1.28-.421 2.14-2.14 3.437l-213.43 147.42C656 592.366 652.58 605.659 658.56 622.354l85.303 245.139c.42 2.578.86 2.998 0 3.858-.86 1.28-2.14.439-3.858-.86L533.85 713.216c-13.714-10.715-29.568-10.715-43.282 0L284.434 870.51c-1.719 1.28-2.999 2.14-3.858.84z"/></svg>'
    );
    width: 28px;
    height: 28px;
    margin: 4px;

    &.starred {
      @include svg.background-svg(
        '<svg viewBox="0 0 1024 1024"><path fill="#feba60" d="M218.862 956.215c17.554 13.294 39.863 8.576 66.432-10.716L512 779.21 739.145 945.5c26.57 19.292 48.42 24.01 66.432 10.716 17.554-13.294 21.431-35.145 10.716-66.432l-89.582-266.57 228.864-164.57c26.569-18.853 37.284-38.584 30.427-59.996-6.857-20.572-27.008-30.866-59.995-30.428l-280.722 1.701L560 102.07c-10.277-31.707-25.691-47.56-48-47.56-21.851 0-37.285 15.853-47.58 47.56l-85.284 267.85-280.704-1.7c-33.006-.44-53.138 9.855-59.995 30.427-7.296 21.43 3.84 41.143 30.427 59.995L297.71 623.214l-89.564 266.569c-10.715 31.287-6.857 53.138 10.716 66.432z"/></svg>'
      );
    }
  }
}
